<template>
  <v-container>
    <v-row
      align="center"
      justify="center"
      class="page-login"
    >
      <div>
        <v-img
          class="page-login--logo"
          :src="require('@/assets/star.svg')"
        />
        <div
          justify="center"
          class="page-login--form"
        >
          <v-form
            ref="loginForm"
            v-model="valid"
            lazy-validation
          >
            <v-text-field
              v-model="formLogin.username"
              :rules="nameRules"
              label="用户名"
              required
            />

            <v-text-field
              v-model="formLogin.password"
              type="password"
              :rules="passwordRules"
              label="密码"
              required
            />

            <v-text-field
              v-model="formLogin.code"
              :rules="nameRules"
              label="验证码"
              required
            >
              <template v-slot:append>
                <v-fade-transition leave-absolute>
                  <img
                    width="100"
                    height="24"
                    src="./image/login-code.png"
                    alt=""
                  >
                </v-fade-transition>
              </template>
            </v-text-field>

            <v-btn
              class="page-login--btn"
              :disabled="!valid"
              color="#0D47A1"
              @click="submit"
            >
              登录
            </v-btn>
          </v-form>
        </div>
      </div>
    </v-row>
    <material-snackbar-tip
      v-model="snackbarDescp.snackbar"
      :type="snackbarDescp.snackbarType"
      :timeout="snackbarDescp.snackbarTimeout"
      v-bind="{
        bottom: true,
        right: true
      }"
      :text="snackbarDescp.snackbarContent"
    />
    <alert-dialog
      v-model="alert.dialog"
      :title="alert.title"
      :msg="alert.msg"
    />
  </v-container>
</template>

<script>
  import globalDef from '@/util/globals'
  import * as axios from '@/util/apptplaxios'
  import lan from '@/util/lan-char'
  import { mapActions } from 'vuex'
  // import { sync } from 'vuex-pathify'
  export default {
    name: 'Login',
    data () {
      return {
        lanChar: lan.GetLan(),
        // dialog data
        snackbarDescp: {
          snackbar: false,
          snackbarContent: 'snackbar content',
          snackbarTimeout: 2000,
          snackbarType: 'info',
        },
        alert: {
          dialog: false,
          title: '',
          msg: '',
        },
        valid: true,
        nameRules: [
          v => !!v || 'Name is required',
          // v => (v && v.length <= 10) || 'Name must be less than 10 characters',
        ],
        passwordRules: [
          v => !!v || 'Password is required',
          // v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
        ],
        formLogin: {
          username: 'admin',
          password: 'admin',
          code: 'v9am',
        },
      }
    },
    computed: {
      // ...sync('user', [
      //   'uuid',
      //   'token',
      //   'password',
      //   'username',
      // ]),
    },
    mounted () {
    },
    beforeDestroy () {
    },
    methods: {
      tipInfo (level, content, timeout) {
        this.snackbarDescp.snackbarType = level
        this.snackbarDescp.snackbarContent = content
        this.snackbarDescp.snackbarTimeout = timeout
        this.snackbarDescp.snackbar = true
      },
      alertInfo (title, content) {
        this.alert.dialog = true
        this.alert.title = title
        this.alert.msg = content
      },
      ...mapActions('user', [
        'login',
      ]),
      submit () {
        var valid = this.$refs.loginForm.validate()
        if (valid) {
          this.getToken()
        } else {
          // 登录表单校验失败
          this.alertInfo(this.lanChar.alertInfoTitleInputError, this.lanChar.alertInfoAuthoError)
        }
      },
      getToken () {
        const data = {
          msgHead: {
            instanceID: 'apptpl-web-ui-client',
            requestType: 'get-token',
            serialNum: 0,
          },
          data: {
            userName: this.formLogin.username,
            key: this.formLogin.password,
          },
        }
        axios.axiosGetToken(data)
          .then((res) => {
            if (res.data.msgHead.status === 'ok') {
              this.login({
                username: this.formLogin.username,
                password: this.formLogin.password,
                uuid: this.formLogin.username,
                token: res.data.data.token,
              }).then(() => {
                // 重定向对象不存在则返回顶层路径
                // this.$router.replace(this.$route.query.redirect || 'apptpl/status')
                this.$router.replace(this.$route.query.redirect || '/')
              })
            } else {
              this.tipInfo('info', this.lanChar.tipInfoOperateRespFail + res.data.msg, globalDef.TIPINFO_DISPLAY_DURATION)
            }
          })
          .catch((e) => {
            this.tipInfo('error', this.lanChar.tipInfoOperateRequestFail + e, globalDef.TIPINFO_DISPLAY_DURATION)
          })
      },
    },
  }
</script>

<style lang="scss">
.page-login {
  height: 100%;
  align-items: center;
  justify-content: center;
  .page-login--logo {
    width: 328px;
    margin-bottom: 2em;
    margin-top: 2em;
  }
  // 登录表单
  .page-login--form {
    width: 328px;
  }
  .page-login--btn {
    width: 328px;
    color: white;
  }
}
</style>
